import React, { useEffect, useState } from 'react'
import { Row, Col, Button } from 'antd'
import { backgroundObj } from '@/utils/utils'
import MoreComponents from '../MoreComponents'
import defaultImg from '../image/defaultImg.png'
import DataTime from './components/DateTime'
import './index.less'
const RenderTime = (props) => {
    const { data } = props
    const { preheatFlag, price, secKillPrice, secKillTag, secKillStartTime, secKillEndTime, secKillStock, preheatHour } = data

    let nowTime = parseInt(new Date().getTime() / 1000);
    let startTime = parseInt(new Date(secKillStartTime.replace(/-/g, '/')).getTime() / 1000)
    let endTime = parseInt(new Date(secKillEndTime.replace(/-/g, '/')).getTime() / 1000)
    if (nowTime >= startTime && nowTime <= endTime) {
        return <div className='channel-color'>
            <DataTime type='start' preheatFlag={preheatFlag} startTime={secKillStartTime} endTime={secKillEndTime}></DataTime>
        </div>
    } else if (
        nowTime >= endTime
    ) {
        return <div className='channel-color-before'>已结束</div>
    } else if (preheatFlag === '1' && nowTime < startTime && (preheatHour * 60 * 60) > (startTime - nowTime)) {
        return <div className='channel-color'>
            <DataTime type='before' startTime={secKillStartTime} endTime={secKillEndTime}></DataTime>
        </div>

    } else {
        return <div className='channel-color-before'>已结束</div>
    }

}
const RenderStyle = (props) => {
    const { data = {} } = props
    const { list = [], top, bottom, countType, goodsNameStatus, goodsDescStatus, priceFlag, oldPriceFlag } = data

    const [renderList, setRenderList] = useState([])
    useEffect(() => {
        if (list.length === 0) {
            // setRenderList([
            //     {
            //         cover: defaultImg,
            //         goodsName: '此处显示商品名称'
            //     },
            //     {
            //         cover: defaultImg,
            //         goodsName: '此处显示商品名称'
            //     },
            //     {
            //         cover: defaultImg,
            //         goodsName: '此处显示商品名称'
            //     }
            // ])
        }
        else {
            setRenderList(list)
        }
    }, [list.length])
    if (countType === 'list') {
        return <div className='wxPage_SecondKill_style1'>
            {renderList.map(val => {
                const { goodsName, cover, secKillName, secKillPrice } = val
                return <div className='list-style-list'>
                    <div className='item-image'>
                        <img style={{ width: '100%', height: '100%', objectFit: 'cover' }} src={cover || defaultImg}></img>
                    </div>
                    <div className='item-info'>
                        <div className='item-info-titleOne'>{secKillName}</div>
                        <div className=''><RenderTime data={val} ></RenderTime></div>
                        <div className='item-price'>
                            <div className='price'>￥{secKillPrice}</div>
                            <Button className='type-button'> 马上抢 </Button>
                        </div>
                    </div>
                </div>
            })}
        </div>
    }
    else if (countType === 'bigImage') {
        return <div className='wxPage_SecondKill_style2'>
            {renderList.map(val => {
                const { goodsName, cover, secKillName, secKillPrice } = val
                return <div className='list-style-list'>
                    <div className='item-image'>
                        <img style={{ width: '100%', height: '100%', objectFit: 'cover' }} src={cover || defaultImg}></img>
                    </div>
                    <div className='item-info'>
                        <div className='item-info-titleOne'>{secKillName}</div>
                        <div className=''><RenderTime data={val} ></RenderTime></div>
                        <div className='item-price'>
                            <div className='price'>￥{secKillPrice}</div>
                            <Button className='type-button'> 马上抢 </Button>
                        </div>
                    </div>
                </div>
            })}
        </div>
    }
    else if (countType === 'twoList') {
        return <div className='wxPage_SecondKill_style3'>
            {renderList.map(val => {
                const { goodsName, cover, secKillName, secKillPrice } = val
                return <div className='list-style-list'>
                    <div className='item-image'>
                        <img style={{ width: '100%', height: '100%', objectFit: 'cover' }} src={cover || defaultImg}></img>
                    </div>
                    <div className='item-info'>
                        <div className='item-info-titleOne'>{secKillName}</div>
                        <div className=''><RenderTime data={val} ></RenderTime></div>
                        <div className='item-price'>
                            <div className='price'>￥{secKillPrice}</div>
                            <Button className='type-button'> 马上抢 </Button>
                        </div>
                    </div>
                </div>
            })}
        </div>
    } else if (countType === 'leftScroll') {
        return <div className='wxPage_SecondKill_style4'>
            <div className='slide-area'>
                {renderList.map(val => {
                    const { goodsName, cover, secKillName, secKillPrice } = val
                    return <div className='list-style-list'>
                        <div className='item-image'>
                            <img style={{ width: '100%', height: '100%', objectFit: 'cover' }} src={cover || defaultImg}></img>
                        </div>
                        <div className='item-info'>
                            <div className='item-info-titleOne'>{secKillName}</div>
                            <div className=''><RenderTime data={val} ></RenderTime></div>
                            <div className='item-price'>
                                <div className='price'>￥{secKillPrice}</div>
                                <Button className='type-button'>马上抢</Button>
                            </div>
                        </div>
                    </div>
                })}
            </div>

        </div>
    }
}

const FormRender = (props) => {
    const { data = {} } = props
    const { list = [], paddingTop = 0, paddingLeft = 0, top = 0, bottom = 0, } = data
    return <div style={{ padding: `${paddingTop}px ${paddingLeft}px`, marginTop: top, marginBottom: bottom, }}>
        <MoreComponents {...props}></MoreComponents>
        <RenderStyle {...props}></RenderStyle>
    </div>
}
export default FormRender